<template>
  <div>
    <el-dialog :title="title"
               :visible.sync="settlementDialog"
               width="80%"
               :close-on-click-modal="false"
               :show-close="true"
               :modal-append-to-body="false"
               class="settlement-dialog"
               @close="settlementClose"
               top="5vh"
               append-to-body>
      <el-row>
        <!-- 左侧表格区域 -->
        <el-col :span="12"
                class="left-column">
          <div class="table-container">
            <p>
              <span style="color: black;">包间费应收：
                <span style="color: rgb(238, 0, 0); font-weight: bold;">{{ roomMoney }}</span>
              </span>
              <span style="color: black;">元</span>
            </p>
            <el-table :data="roomData"
                      border
                      style="width: 100%;"
                      stripe="true">
              <el-table-column prop="dialogTitle"
                               label="包间名"
                               align="center"></el-table-column>
              <el-table-column prop="billingDuration"
                               label="计费时长"
                               align="center">
                <template slot-scope="scope">
                  {{ scope.row.hour }}小时{{ scope.row.minute }}分钟
                </template>
              </el-table-column>
              <el-table-column prop="tableFee"
                               label="包间费"
                               align="center"></el-table-column>
              <el-table-column prop="overtimeFee"
                               label="超时费"
                               align="center"></el-table-column>
              <el-table-column prop="nightFee"
                               label="服务费"
                               align="center"></el-table-column>
            </el-table>
          </div>
          <div class="table-container">
            <p>
              <span style="color: black;">商品共计：{{ productCount }}</span>
              <span style="color: black;">件</span><span style="color: black;">应收：</span>
              <span style="color: rgb(238, 0, 0); font-weight: bold;">{{ totalMoney.consumption }}</span>
              <span style="color: black;">元</span>
            </p>
            <el-table :data="productData"
                      border
                      style="width: 100%;"
                      stripe
                      class="settlement-custom-table">
              <el-table-column prop="commodityName"
                               label="商品名"
                               align="center">
              </el-table-column>
              <el-table-column prop="quantity"
                               label="数量"
                               align="center">
              </el-table-column>
              <el-table-column prop="unitPrice"
                               label="单价"
                               align="center">
              </el-table-column>
              <el-table-column prop="totalAmount"
                               label="金额"
                               align="center">
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <!-- 中间竖线分隔 -->

        <!-- 右侧实收金额和其他信息 -->
        <el-col :span="12"
                class="right-column">
          <div class="settlement-info">
            <el-form label-width="120px">
              <el-form-item label="应付金额：">
                <span class="settlement-money">{{ this.formattedTotalMoney }}</span><span class="settlement-yuan"> 元</span>
              </el-form-item>
              <el-form-item label="优惠/抹零：">
                <el-input-number v-model="discountAmount"
                                 placeholder="请输入优惠/抹零金额"
                                 :min="0"
                                 :controls="false"
                                 :precision="2"
                                 size="small"
                                 @change="handleInputChange"
                                 class="custom-input">
                </el-input-number>
                <span style="color: black;">元</span>
                <el-tooltip :content="tooltipContent"
                            placement="right"
                            style="margin-right: 20px;">
                  <i class="el-icon-info"></i>
                </el-tooltip>
                <el-button type="text"
                           @click="discount = true">打折</el-button>
                <el-button type="text"
                           @click="setToZero">清除</el-button>
              </el-form-item>
              <el-form-item label="还需支付：">
                <span class="settlement-money">{{ this.formattedPaymentRequired }}</span><span class="settlement-yuan"> 元</span>
                <el-button type="text"
                           @click="clearDiscountAmount"
                           style="margin-left: 40px;">抹零(元)</el-button>
              </el-form-item>
              <el-form-item label="支付方式："
                            class="pay-mode">
                <el-radio-group v-model="paymentMethod"
                                class="pay-radio">
                  <el-radio-button label="cash">
                    <i class="iconfont icon-xianjinzhifu1 xianjin"></i>
                    <p class="pay-font">现金支付</p>
                    <span class="badge"
                          v-if="paymentMethod === 'cash'"></span>
                  </el-radio-button>
                  <el-radio-button label="wechat">
                    <i class="iconfont icon-weixinzhifu weixin"></i>
                    <p class="pay-font">微信支付</p>
                    <span class="badge"
                          v-if="paymentMethod === 'wechat'"></span>
                  </el-radio-button>
                  <el-radio-button label="alipay">
                    <i class="iconfont icon-zhifubaozhifu zhifubao"></i>
                    <p class="pay-font">支付宝支付</p>
                    <span class="badge"
                          v-if="paymentMethod === 'alipay'"></span>
                  </el-radio-button>
                </el-radio-group>
                <div>
                  <el-input placeholder="请输入已支付现金"
                            v-model="cash">
                    <template slot="prepend">现金:</template>
                  </el-input>

                  <p v-if="cash !== null && !isNaN(cash)">
                    <span v-if="(cash - paymentRequiredMoney) < 0"
                          style="color: red; font-size: 12px; font-weight: bold;">
                      现金支付金额不足
                    </span>
                    <span v-else
                          style="color: black; font-size: 12px;">
                      找零: <span style="color: red;font-size: 14px; font-weight: bold;">{{ (cash - paymentRequiredMoney).toFixed(2) }}</span>
                    </span>
                  </p>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>

      <!-- 弹窗底部按钮 -->
      <span slot="footer"
            class="dialog-footer">
        <el-checkbox v-model="printBill">打印账单</el-checkbox>
        <div class="button-group">
          <el-button @click="refreshBill"
                     type="primary"
                     icon="el-icon-refresh">刷新账单</el-button>
          <el-button type="danger"
                     @click="confirmCheckout"
                     icon="el-icon-success">确认结账</el-button>
        </div>
      </span>
    </el-dialog>
    <div class="discountDialog">
      <!-- 弹窗 -->
      <el-dialog title="快捷打折"
                 :visible.sync="discount"
                 width="30%"
                 style="text-align: center;">
        <p>输入折扣系数：0-1，如8折 输入0.8</p>
        <el-input-number v-model="discountCoefficient"
                         placeholder="请输入折扣系数"
                         :min="0"
                         :max="1"
                         :step="0.01"
                         :precision="2"
                         class="custom-input">
        </el-input-number>
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span slot="footer"
                class="dialog-footer"
                style="text-align: right;margin-top: 30px;">
            <el-button @click="discount = false">取消</el-button>
            <el-button type="primary"
                       @click="estimateGetMoney">确认</el-button>
          </span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    roomData: Array,
    productData: Array,
    totalMoney: Object,
    tableInfo: Object,
  },
  data() {
    return {
      settlementDialog: false, // 控制对话框显示隐藏的变量
      printBill: true, // 打印账单的选项
      paymentMethod: 'cash', // 默认支付方式为现金支付
      discount: false, // 快捷打折 对话框显示隐藏的变量
      paymentRequiredMoney: 0, //还需支付
      discountAmount: 0, //优惠抹零金额
      cash: 0, //现金
      giveChange: 0, //找零
      discountCoefficient: 1, //折扣系数
    };
  },
  computed: {
    paymentRequired() {
      return Math.max(0, this.totalMoney.totalAmount - this.discountAmount);
    },
    formattedPaymentRequired() {
      this.paymentRequiredMoney = this.paymentRequired.toFixed(2);
      this.cash = this.paymentRequiredMoney;
      return this.paymentRequiredMoney;
    },
    formattedTotalMoney() {
      if (this.totalMoney && typeof this.totalMoney.totalAmount === 'number') {
        return this.totalMoney.totalAmount.toFixed(2);
      } else {
        return '0.00';
      }
    },
    roomMoney() {
      if (this.totalMoney && typeof this.totalMoney.tableFee === 'object') {
        return this.totalMoney.tableFee.reduce((acc, item) => {
          return acc + item.tableFee + item.overtimeFee + item.nightFee;
        }, 0);
      } else {
        return '0.00';
      }
    },
    tooltipContent() {
      return '最高可优惠：' + this.formattedTotalMoney + ' 元';
    },
    productCount() {
      return this.productData.length;
    },
  },
  methods: {
    settlementClose() {
      this.printBill = true;
      this.paymentMethod = 'cash';
      this.paymentRequiredMoney = 0;
      this.discountAmount = 0;
      this.cash = 0;
      this.giveChange = 0;
      this.discountCoefficient = 1;
    },
    async confirmCheckout() {
      // 获取所需数据
      const { cashierResult } = this.tableInfo;
      const formattedPaymentReceived = this.formattedPaymentRequired;
      const formattedTotalMoney = this.formattedTotalMoney;
      const roomFee = this.roomData[0];

      // 构建 requestData 对象
      let requestData = {
        chargingId: cashierResult.chargingId,
        tableId: this.tableInfo.id,
        uuid: this.tableInfo.uuid,
        amountReceived: formattedPaymentReceived,
        amountDue: formattedTotalMoney,
        roundingAmount: this.discountAmount,
        changeAmount: this.cash - this.paymentRequiredMoney,
        discount: this.discountCoefficient,
        paymentMethod: this.paymentMethod,
        roomFee: roomFee.tableFee,
        overtimeFee: roomFee.overtimeFee,
        nightFee: roomFee.nightFee,
        goodsAmount: this.totalMoney.consumption,
      };
      let res = await this.$api.paymentRecords.checkout(requestData, {
        loadingTime: 100,
        loadingText: '数据加载中...',
      });
      if (res) {
        this.$emit('confirm');
      }
    },
    refreshBill() {
      // 刷新账单的逻辑，可以在这里更新数据
      this.$emit('refresh'); // 触发父组件的刷新事件
    },
    handleInputChange(value) {
      // 处理输入值变化事件
      if (value === '' || value === null || isNaN(value)) {
        // 如果输入值为空或者非法，强制设置为0
        this.setToZero();
      }
    },
    clearDiscountAmount() {
      let totalCost = this.paymentRequiredMoney;
      let roundedCost = Math.floor(totalCost / 10) * 10; // 取十位整数部分并抹零
      let discount = totalCost - roundedCost; // 计算抹零后的金额
      this.discountAmount = discount.toFixed(2); // 将抹零的金额赋值给 discountAmount，并保留两位小数
    },
    setToZero() {
      this.discountAmount = 0;
    },
    /**
     * 快捷打折
     */
    estimateGetMoney() {
      // 计算折扣金额
      this.discountAmount =
        this.totalMoney.totalAmount * (1 - this.discountCoefficient);
      // 更新 paymentRequiredMoney
      this.paymentRequiredMoney = Math.max(
        0,
        this.totalMoney.totalAmount - this.discountAmount
      ).toFixed(2);
      // 关闭弹窗
      this.discount = false;
    },
  },
};
</script>
<style lang="less" scoped>
.discountDialog /deep/ .el-dialog {
  min-height: 28vh;
}
.discountDialog /deep/ .el-dialog__header {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  z-index: 2; /* 提升层级，确保在其他内容之上 */
}

.discountDialog /deep/ .el-dialog__header .el-dialog__title {
  padding: 15px 20px; /* 调整标题的内边距，增加舒适度 */
  font-size: 18px; /* 调整标题字体大小 */
  color: #333; /* 设置标题颜色 */
}

.discountDialog /deep/ .el-dialog__headerbtn .el-dialog__close {
  color: red;
  font-size: 24px;
}

.pay-mode /deep/ .el-input__inner {
  width: 80%;
  height: 35px;
}
.pay-mode /deep/ .el-input-group__prepend {
  color: #636363;
  background-color: rgb(207, 223, 252);
}
.pay-mode /deep/ .el-input-group {
  margin: 0px 0px 0px 10px;
}
.iconfont {
  font-size: 28px; /* 根据需要调整图标大小 */
}
.xianjin {
  color: rgb(252, 53, 53);
}
.weixin {
  color: green;
}
.zhifubao {
  color: blue;
}
.pay-radio /deep/ .el-radio-button__inner {
  padding: 10px 15px;
  margin: 10px;
  border: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
    /* 上方阴影 */ 4px 0 8px rgba(0, 0, 0, 0.1),
    /* 右侧阴影 */ 0 -4px 8px rgba(0, 0, 0, 0.1),
    /* 下方阴影 */ -4px 0 8px rgba(0, 0, 0, 0.1) !important; /* 左侧阴影 */
}
.pay-radio /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
    /* 上方阴影 */ 4px 0 8px rgba(0, 0, 0, 0.1),
    /* 右侧阴影 */ 0 -4px 8px rgba(0, 0, 0, 0.1),
    /* 下方阴影 */ -4px 0 8px rgba(0, 0, 0, 0.1) !important; /* 左侧阴影 */
}
.pay-font {
  font-size: 12px;
  color: #333;
}

.pay-radio /deep/ .el-radio-button {
  position: relative;
}

.pay-radio /deep/ .badge {
  position: absolute;
  top: 0px; /* 调整角标距离顶部的位置 */
  right: 0px; /* 调整角标距离右侧的位置 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 0 0 16px; /* 控制三角形大小和形状 */
  border-color: red transparent transparent transparent; /* 控制三角形颜色 */
  transform: rotate(0deg); /* 旋转角标使其朝右上方 */
}

.pay-radio
  /deep/
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  background-color: transparent !important; /* 选中状态的背景色为透明 */
  transform: translateY(-3px); /* 在垂直方向上向上移动一定距离 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加一个轻微的阴影效果 */
}

.pay-radio /deep/ .el-radio-button:hover .badge,
.pay-radio /deep/ .el-radio-button.is-checked .badge {
  display: block; /* 当选中或鼠标悬停时显示角标 */
  z-index: 1; /* 确保角标处于按钮上层 */
}

.dialog-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.settlement-info /deep/ .el-form-item__label {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.settlement-dialog /deep/ .el-dialog__header {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  z-index: 2; /* 提升层级，确保在其他内容之上 */
}

.settlement-dialog /deep/ .el-dialog__header .el-dialog__title {
  padding: 15px 20px; /* 调整标题的内边距，增加舒适度 */
  font-size: 18px; /* 调整标题字体大小 */
  color: #333; /* 设置标题颜色 */
}

.settlement-dialog /deep/ .el-dialog__headerbtn .el-dialog__close {
  color: red;
  font-size: 24px;
}

.left-column {
  padding-right: 15px; /* 右侧留出间距 */
}

.right-column {
  padding-left: 15px; /* 左侧留出间距 */
}
.dialog-left {
  flex: 1;
  padding-right: 20px;
}

.dialog-right {
  flex: 1;
  padding-left: 20px;
}

.table-container {
  margin-bottom: 20px;
}

.table-container /deep/ .cell {
  color: #333;
  font-size: 14px;
}

.table-container /deep/ .el-table th {
  background-color: rgb(194, 216, 255);
}

.right-content {
  margin-bottom: 20px;
}

.settlement-dialog /deep/ .el-dialog__footer {
  padding: 0;
}

.custom-input /deep/ .el-input__inner {
  color: black; /* 设置输入文字颜色为黑色 */
}

.dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.dialog-footer .button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
}

.dialog-footer el-button {
  min-width: 100px; /* 设置按钮最小宽度 */
}
.dialog-content {
  display: flex;
  flex-direction: column;
}

.settlement-info {
  margin-top: 20px;
}
.settlement-money {
  font-size: 20px;
  color: rgb(238, 0, 0);
  font-weight: bold;
}
.settlement-yuan {
  color: #333;
}
.settlement-dialog /deep/ .el-dialog {
  min-height: 85vh;
}

.settlement-custom-table {
  max-height: calc(100vh - 530px);
  overflow-y: auto;
  /* 添加滚动条 */
}

.settlement-custom-table::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}
.settlement-custom-table /deep/ .el-table__header-wrapper {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
}
</style>
